<template>
    <div>
      <el-container>
        <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
          <span>
            &nbsp&nbsp
          <span class="title">新增任务</span>
          </span>
          <div>
            <el-button type="primary" icon="el-icon-folder-checked">保存</el-button>
            <el-button type="primary" icon="el-icon-upload2">提交</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </el-header>
        <el-main>
          <el-form :model="taskForm" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="任务名称" prop="taskName">
                  <el-input v-model="taskForm.taskName" placeholder="请输入任务名称" required class="uniform-input"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务编号">
                  <el-input disabled placeholder="任务编号根据后台设定的规定自动生成" class="uniform-input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="充电站名称" prop="stationName">
                  <el-input v-model="taskForm.stationName" placeholder="请选择充电站名称" readonly class="uniform-input">
                    <el-button slot="append" type="primary" @click="openStationDialog">选择</el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="充电站负责人" prop="chargerInCharge">
                  <el-input v-model="taskForm.chargerInCharge" placeholder="请选择充电站负责人" readonly class="uniform-input">
                    <el-button slot="append" type="primary" @click="openChargePersonDialog">选择</el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工作周期" prop="workCycle">
                  <el-select v-model="taskForm.workCycle" placeholder="请选择工作周期" class="uniform-input">
                    <el-option label="选项1" value="option1"></el-option>
                    <el-option label="选项2" value="option2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务类型" prop="taskType">
                  <el-select v-model="taskForm.taskType" placeholder="请选择任务类型" class="uniform-input">
                    <el-option label="选项1" value="option1"></el-option>
                    <el-option label="选项2" value="option2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间" prop="startTime">
                  <el-date-picker v-model="taskForm.startTime" type="datetime" placeholder="请选择开始时间" class="uniform-input" style="width: 90%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker v-model="taskForm.endTime" type="datetime" placeholder="请选择结束时间" class="uniform-input" style="width: 90%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="执行人员" prop="executor">
                  <el-input v-model="taskForm.executor" placeholder="请选择执行人员" readonly class="uniform-input">
                    <el-button slot="append" type="primary" @click="openExecutorDialog">选择</el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务状态">
                  <el-input disabled placeholder="根据执行情况自动填写状态信息" class="uniform-input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="任务说明" prop="taskDescription">
              <el-input v-model="taskForm.taskDescription" type="textarea" placeholder="请输入任务说明"></el-input>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        taskForm: {
          taskName: '',
          taskNumber: '',
          stationName: '',
          chargerInCharge: '',
          workCycle: '',
          taskType: '',
          startTime: '',
          endTime: '',
          executor: '',
          taskDescription: ''
        },
        stationOptions: [
          { name: '知更鸟充电站1' },
          { name: '知更鸟充电站2' }
        ],
        chargePersonOptions: [
          { name: '张三' },
          { name: '李四' }
        ],
        executorOptions: [
          { name: '王五' },
          { name: '赵六' }
        ]
      };
    },
    methods: {
      openStationDialog() {
        const h = this.$createElement;
        const stationOptionsVNodes = this.stationOptions.map(option =>
          h(
            'div',
            {
              style: 'padding: 10px; cursor: pointer',
              on: {
                click: () => {
                  this.taskForm.stationName = option.name;
                  this.$msgbox.close();
                }
              }
            },
            option.name
          )
        );
        this.$msgbox({
          title: '选择充电站名称',
          message: h('div', null, stationOptionsVNodes),
          showCancelButton: true,
          confirmButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              done();
            } else {
              done();
            }
          }
        });
      },
      openChargePersonDialog() {
        const h = this.$createElement;
        const chargePersonOptionsVNodes = this.chargePersonOptions.map(option =>
          h(
            'div',
            {
              style: 'padding: 10px; cursor: pointer',
              on: {
                click: () => {
                  this.taskForm.chargerInCharge = option.name;
                  this.$msgbox.close();
                }
              }
            },
            option.name
          )
        );
        this.$msgbox({
          title: '选择充电站负责人',
          message: h('div', null, chargePersonOptionsVNodes),
          showCancelButton: true,
          confirmButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              done();
            } else {
              done();
            }
          }
        });
      },
      openExecutorDialog() {
        const h = this.$createElement;
        const executorOptionsVNodes = this.executorOptions.map(option =>
          h(
            'div',
            {
              style: 'padding: 10px; cursor: pointer',
              on: {
                click: () => {
                  this.taskForm.executor = option.name;
                  this.$msgbox.close();
                }
              }
            },
            option.name
          )
        );
        this.$msgbox({
          title: '选择执行人员',
          message: h('div', null, executorOptionsVNodes),
          showCancelButton: true,
          confirmButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              done();
            } else {
              done();
            }
          }
        });
      },
      back(){
        this.$router.push("/hostDisplay")
      },
    }
  };
  </script>
  
  <style scoped>
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  .uniform-input {
    width: 90%;
    height: 36px;
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的实际尺寸 */
  }
  div {
    background-color: rgb(255, 255, 255);
  }
  </style>    
  